<!-- using a hyperscript hack to make the modal pop correctly when it's loaded -->
<dialog class="modal" _="on load call me.showModal()">
    <div class="modal-box w-full">
        <h2 class="font-bold text-xl">
            Edit <span class="rarity-{{.Rarity}}-text"
        >
                {{.Name}} {{RepeatString .SelectedTemplate.Star "🌟"}}
            </span>
        </h2>
        <div id="modal-alert-container"></div>
        <form
            hx-patch="/api/v1/dock/edit/{{.ID}}?commander_id={{.OwnerID}}"
            hx-include="input"
            hx-swap="outerHTML"
            hx-target="#dock-content"
            hx-target-error="#modal-alert-container"
            _="on htmx:afterOnLoad if detail.xhr.status == 200 call (closest <dialog/>).close()"
        >
            <label class="form-control w-full">
                <div class="label">
                    <span class="label-text">Template ID</span>
                </div>
                <select class="select select-primary w-full" name="template_id">
                    {{range .AvailableTemplates}}
                        <option
                            value="{{.TemplateID}}"
                            {{if eq .TemplateID $.SelectedTemplate.TemplateID}}selected{{end}}
                        >
                        {{.Name}} — {{RepeatString .Star "🌟"}} — [{{.TemplateID}}]
                        </option>
                    {{end}}
                </select>
            </label>
            <label class="form-control w-full">
                <div class="label">
                    <span class="label-text">Skin ID</span>
                </div>
                <select class="select select-primary w-full" name="skin_id">
                    {{range .AvailableSkins}}
                        <option
                            value="{{.ID}}"
                            {{if eq .ID $.SelectedSkin.ID}}selected{{end}}
                        >
                        {{.Name}} — [{{.ID}}]
                        </option>
                    {{end}}
                </select>
            </label>
            <label class="form-control w-full">
                <div class="label">
                    <span class="label-text">
                        Level : <span class="text-secondary" id="ship-level-text">{{.Level}}</span>
                    </span>
                </div>
                <input
                    type="range"
                    class="range range-secondary range-xs w-full"
                    value="{{.Level}}"
                    min="1"
                    max="125"
                    step="1"
                    name="level"
                    _="on input put me.value into #ship-level-text"
                />
            </label>
            <label class="form-control w-full">
                <div class="label">
                    <span class="label-text">
                        Max Level : <span class="text-secondary" id="ship-max-level-text">{{.MaxLevel}}</span>
                    </span>
                </div>
                <input
                    type="range"
                    class="range range-secondary range-xs w-full"
                    value="{{.MaxLevel}}"
                    min="1"
                    max="125"
                    step="1"
                    name="max_level"
                    _="on input put me.value into #ship-max-level-text"
                />
            </label>
            <label class="form-control w-full">
                <div class="label">
                    <span class="label-text">
                        Energy : <span class="text-success" id="ship-energy-text">{{.Energy}}</span>
                    </span>
                </div>
                <input
                    type="range"
                    class="range range-success range-xs w-full"
                    value="{{.Energy}}"
                    min="1"
                    max="150"
                    step="1"
                    name="energy"
                    _="
                        on input
                        put me.value into #ship-energy-text
                        remove .text-error .text-success .text-warning from #ship-energy-text
                        remove .range-error .range-success .range-warning from me
                        if me.value < 50 add .text-error to #ship-energy-text else if me.value < 100 add .text-warning to #ship-energy-text else add .text-success to #ship-energy-text end
                        if me.value < 50 add .range-error to me else if me.value < 100 add .range-warning to me else add .range-success to me end
                    "
                />
            </label>
            <label class="form-control w-full">
                <div class="label">
                    <span class="label-text">
                        Intimacy : <span class="text-success" id="ship-intimacy-text">{{.Intimacy}}</span>
                    </span>
                </div>
                <input
                    type="range"
                    class="range range-success range-xs w-full"
                    value="{{.Intimacy}}"
                    min="1"
                    max="20000"
                    step="1"
                    name="intimacy"
                    _="
                        on input
                        put me.value into #ship-intimacy-text
                        remove .text-error .text-success .text-warning from #ship-intimacy-text
                        remove .range-error .range-success .range-warning from me
                        if me.value < 5000 add .text-error to #ship-intimacy-text else if me.value < 1000 add .text-warning to #ship-intimacy-text else add .text-success to #ship-intimacy-text end
                        if me.value < 5000 add .range-error to me else if me.value < 1000 add .range-warning to me else add .range-success to me end
                    "
                />
            </label>
            <div class="alert">
                <i class="bi-info-circle-fill"></i>
                <p class="text-xs">
                    ≤ 3100 Disappointed<br>
                    3100 - 6099 = Stranger<br>
                    6100 - 8099 = Friendly<br>
                    8100 - 9999 = Crush<br>
                    10000 = Love<br>
                    20000 = Oath<br>
                </p>
            </div>
            <table class="table table-zebra table-xs my-2">
                <thead>
                    <tr>
                        <th>Flag</th>
                        <th>Enabled</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>is_locked</code></td>
                        <td><input type="checkbox" {{if .Locked}}checked{{end}} name="locked" class="checkbox checkbox-error checkbox-xs" /></td>
                    </tr>
                    <tr>
                        <td><code>is_secretary</code></td>
                        <td>
                            <input
                                name="secretary"
                                type="checkbox"
                                {{if .IsSecretary}}checked{{end}}
                                class="checkbox checkbox-accent checkbox-xs"
                            />
                        </td>
                    </tr>
                    <tr>
                        <td><code>propose</code></td>
                        <td>
                            <input
                                name="propose"
                                type="checkbox"
                                {{if .Propose}}checked{{end}}
                                class="checkbox checkbox-info checkbox-xs"
                                _="on change
                                    if me.checked then remove @disabled from .require-propose
                                    else add @disabled to .require-propose"
                            />
                        </td>
                    </tr>
                    <tr>
                        <td><code>favorite</code></td>
                        <td>
                            <input
                                name="common_flag"
                                type="checkbox"
                                {{if .CommonFlag}}checked{{end}}
                                class="checkbox checkbox-info checkbox-xs"
                            />
                        </td>
                    </tr>
                    <tr>
                        <td><code>blue_print_flag</code></td>
                        <td>
                            <input
                                name="blue_print_flag"
                                type="checkbox"
                                {{if .BluePrintFlag}}checked{{end}}
                                class="checkbox checkbox-info checkbox-xs"
                            />
                        </td>
                    </tr>
                    <tr>
                        <td><code>proficiency (?)</code></td>
                        <td>
                            <input
                                name="proficiency"
                                type="checkbox"
                                {{if .Proficiency}}checked{{end}}
                                class="checkbox checkbox-info checkbox-xs"
                            />
                        </td>
                    </tr>
                </tbody>
            </table>
            <label class="form-control w-full my-2">
                <div class="label">
                    <span class="label-text text-accent">Activity NPC</span>
                </div>
                <input
                    name="activity_npc"
                    type="number"
                    class="input input-accent input-bordered w-full"
                    value="{{.ActivityNPC}}"
                />
            </label>
            <label class="form-control w-full my-2">
                <div class="label">
                    <span class="label-text text-accent">Custom Name</span>
                </div>
                <div class="tooltip tooltip-info" data-tip="Ship names can only be applied if the ship is proposed.">
                    <input
                        name="custom_name"
                        type="text"
                        class="input input-accent input-bordered w-full require-propose"
                        value="{{.CustomName}}"
                        minlength="3"
                        maxlength="30"
                        {{if not .Propose}}disabled{{end}}
                    />
                </div>
            </label>
            <label class="form-control w-full my-2">
                <div class="label">
                    <span class="label-text text-accent">Last Name Change (UTC)</span>
                </div>
                <input
                    name="last_name_change"
                    type="datetime-local"
                    class="input input-accent input-bordered w-full require-propose"
                    value="{{ISOTimestamp .CustomNameTime}}"
                    {{if not .Propose}}disabled{{end}}
                />
            </label>
            <label class="form-control w-full my-2">
                <div class="label">
                    <span class="label-text text-accent">Create Time (UTC)</span>
                </div>
                <input
                    type="datetime-local"
                    name="create_time"
                    class="input input-accent input-bordered w-full"
                    value="{{ISOTimestamp .CreateTime}}"
                />
            </label>
            <div class="join flex justify-center mt-2">
                <button class="btn btn-success join-item" type="submit" name="action" value="save">
                    <i class="bi-floppy2-fill"></i>
                    Save
                </button>
                <button class="btn btn-info join-item" type="submit" name="action" value="duplicate">
                    <i class="bi-copy"></i>
                    Duplicate
                </button>
                <button class="btn btn-error join-item" type="submit" name="action" value="delete">
                    <i class="bi-trash3-fill"></i>
                    Sink
                </button>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>